<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小说阅读网站</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            display: flex;
            height: 100vh;
            background-color: #f5f5f5;
            color: #333;
        }
        
        /* 目录区域 */
        .sidebar {
            width: 300px;
            background-color: #fff;
            border-right: 1px solid #e0e0e0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .sidebar-header {
            padding: 20px;
            border-bottom: 1px solid #e0e0e0;
            background-color: #f9f9f9;
        }
        
        .sidebar-header h1 {
            font-size: 1.5rem;
            color: #333;
        }
        
        .chapter-list {
            flex: 1;
            overflow-y: auto;
            padding: 10px 0;
        }
        
        .chapter-item {
            padding: 12px 20px;
            cursor: pointer;
            border-bottom: 1px solid #f0f0f0;
            transition: background-color 0.2s;
        }
        
        .chapter-item:hover {
            background-color: #f5f5f5;
        }
        
        .chapter-item.active {
            background-color: #e3f2fd;
            color: #1976d2;
            font-weight: bold;
        }
        
        /* 内容区域 */
        .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background-color: #fff;
        }
        
        .content-header {
            padding: 15px 30px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f9f9f9;
        }
        
        .content-title {
            font-size: 1.4rem;
            font-weight: bold;
        }
        
        .content-controls {
            display: flex;
            gap: 15px;
        }
        
        .font-control {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .font-control button {
            width: 32px;
            height: 32px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .font-control button:hover {
            background-color: #f0f0f0;
        }
        
        .content-body {
            flex: 1;
            padding: 30px;
            overflow-y: auto;
            line-height: 1.8;
            font-size: 16px;
        }
        
        .content-body p {
            margin-bottom: 1.2em;
            text-indent: 2em;
        }
        
        /* 加载状态 */
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
            color: #666;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            body {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                height: 40%;
            }
            
            .content {
                height: 60%;
            }
        }
    </style>
</head>
<body>
    <!-- 目录区域 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <h1>小说目录</h1>
        </div>
        <div class="chapter-list" id="chapterList">
            <div class="loading">加载中...</div>
        </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="content">
        <div class="content-header">
            <div class="content-title" id="contentTitle">请选择章节</div>
            <div class="content-controls">
                <div class="font-control">
                    <button id="decreaseFont">A-</button>
                    <span id="fontSize">16</span>
                    <button id="increaseFont">A+</button>
                </div>
            </div>
        </div>
        <div class="content-body" id="contentBody">
            <p>请从左侧目录选择章节开始阅读</p>
        </div>
    </div>

    <script>
        // 全局变量
        let currentChapter = null;
        let fontSize = 16;
        
        // DOM元素
        const chapterListEl = document.getElementById('chapterList');
        const contentTitleEl = document.getElementById('contentTitle');
        const contentBodyEl = document.getElementById('contentBody');
        const fontSizeEl = document.getElementById('fontSize');
        const decreaseFontBtn = document.getElementById('decreaseFont');
        const increaseFontBtn = document.getElementById('increaseFont');
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadChapterList();
            
            // 字体大小控制
            decreaseFontBtn.addEventListener('click', () => {
                if (fontSize > 12) {
                    fontSize -= 2;
                    updateFontSize();
                }
            });
            
            increaseFontBtn.addEventListener('click', () => {
                if (fontSize < 24) {
                    fontSize += 2;
                    updateFontSize();
                }
            });
        });
        
        // 加载章节列表
        async function loadChapterList() {
            try {
                const response = await fetch('/api/v1/list');
                const chapters = await response.json();

                // 进行章节排序
                chapters.sort((a, b) =>a.title.localeCompare(b.title));
                
                // 清空加载状态
                chapterListEl.innerHTML = '';
                
                // 渲染章节列表
                chapters.forEach(chapter => {
                    const chapterItem = document.createElement('div');
                    chapterItem.className = 'chapter-item';
                    chapterItem.textContent = chapter.title;
                    chapterItem.dataset.id = chapter.id;
                    
                    chapterItem.addEventListener('click', () => {
                        // 移除之前选中的章节
                        document.querySelectorAll('.chapter-item.active').forEach(item => {
                            item.classList.remove('active');
                        });
                        
                        // 设置当前选中章节
                        chapterItem.classList.add('active');
                        currentChapter = chapter.id;
                        
                        // 加载章节内容
                        loadChapterContent(chapter.id);
                    });
                    
                    chapterListEl.appendChild(chapterItem);
                });
            } catch (error) {
                console.error('加载章节列表失败:', error);
                chapterListEl.innerHTML = '<div class="loading">加载失败，请刷新重试</div>';
            }
        }
        
        // 加载章节内容
        async function loadChapterContent(chapterId) {
            try {
                contentBodyEl.innerHTML = '<div class="loading">加载中...</div>';
                
                const response = await fetch(`/api/v1/show?id=${chapterId}`);
                const chapterData = await response.json();
                
                // 更新标题
                contentTitleEl.textContent = chapterData.title;
                
                // 格式化内容
                const formattedContent = formatContent(chapterData.content);
                contentBodyEl.innerHTML = formattedContent;
            } catch (error) {
                console.error('加载章节内容失败:', error);
                contentBodyEl.innerHTML = '<div class="loading">加载失败，请重试</div>';
            }
        }
        
        // 格式化内容
        function formatContent(content) {
            // 将内容按段落分割
            const paragraphs = content.split('\n\n');
            
            // 创建段落元素
            return paragraphs.map(p => {
                if (p.trim()) {
                    return `<p>${p.trim()}</p>`;
                }
                return '';
            }).join('');
        }
        
        // 更新字体大小
        function updateFontSize() {
            contentBodyEl.style.fontSize = `${fontSize}px`;
            fontSizeEl.textContent = fontSize;
        }
    </script>
</body>
</html>
